<!-- 订单详情 -->
<template>
	<view class="order-detail-wrap">
		<u-navbar :isFixed="false" :borderBottom="false" back-icon-color="#333" :background="{}" title="提现详情">
		</u-navbar>
		<!--  价格信息 -->
		<view class="order-price-box u-m-b-20">
			<view class="notice-item u-flex u-row-between">
				<text class="title">会员ID</text>
				<text class="detail font-OPPOSANS">{{ withdrawDetail.member_id }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">手机号</text>
				<text class="detail font-OPPOSANS" v-if="withdrawDetail.member">{{ withdrawDetail.member.phone }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">实际打款</text>
				<text class="detail font-OPPOSANS" style="color: #fa3534;font-weight: 800;">￥{{ withdrawDetail.actual_money }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">提现金额</text>
				<text class="detail font-OPPOSANS" >￥{{ withdrawDetail.money }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">手续费/费率</text>
				<text class="detail font-OPPOSANS" >￥{{ withdrawDetail.charge_money }}/{{withdrawDetail.service_fee}} %</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">提现至</text>
				<text class="detail font-OPPOSANS">{{ withdrawDetail.withdraw_type_name }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">提现账户名</text>
				<text class="detail font-OPPOSANS"
					v-if="withdrawDetail.withdraw_info_array">{{ withdrawDetail.withdraw_info_array['真实姓名'] || withdrawDetail.withdraw_info_array['微信用户']  }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">提现账号</text>
				<text class="detail font-OPPOSANS"
					v-if="withdrawDetail.withdraw_info_array">{{ withdrawDetail.withdraw_info_array['银行卡号'] || withdrawDetail.withdraw_info_array['支付宝账户']|| withdrawDetail.withdraw_info_array['微信ID']   }}</text>
			</view>
			<view class="notice-item u-flex u-row-between" v-if="withdrawDetail.withdraw_type == 'bank'">
				<text class="title">银行名称</text>
				<text class="detail font-OPPOSANS"
					v-if="withdrawDetail.withdraw_info_array">{{ withdrawDetail.withdraw_info_array['开户行'] }}</text>
			</view>
			<view class="notice-item u-flex u-row-between">
				<text class="title">备注</text>
				<text>{{withdrawDetail.remark}}</text>
			</view>

		</view>
		<view class="order-price-box u-m-b-20" v-if="withdrawDetail.status == 1">
			<view class="notice-item u-flex u-row-between">
				<text class="title">打款凭证</text>
			</view>
			<view class="u-flex u-row-between">
				<u-upload 
					:placeholderStyle="placeholderStyle" 
					:showProgress="false"
					:show-progress="true"
					:multiple="true"
					:max-size="1024 * 1024 * 5"
					@on-uploaded="uploadSuccess($event, 'company_license_image')"
					@on-remove="uploadRemove($event, 'company_license_image')" 
					:action="`${$API_URL}index/upload`"
					width="148" height="148" max-count="10"></u-upload>
			</view>
		</view>
		<view class="order-price-box u-m-b-20" v-if="withdrawDetail.status > 1">
			<template v-if="withdrawDetail.status > 1">
				<view class="notice-item u-flex u-row-between">
					<text class="title">打款凭证</text>
				</view>
				<view class="u-flex u-row-between" v-for="(item,index) in withdrawDetail.paidoff_evidence_image "
					:key="index">
					<u-image  mode="widthFix" :src="item"></u-image>
				</view>
			</template>
		</view>


		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom">
			<view class="foot_box safe-area-inset-bottom">
				<view class="btn-box">
					<view class="btn-list" v-if="withdrawDetail.status == 0">
						<button class="u-reset-button obtn1" @tap="showPopup('denied')">拒绝</button>
						<button class="u-reset-button obtn2" @tap="showPopup('agree')">同意</button>
					</view>
					<view class="btn-list" v-else-if="withdrawDetail.status == 1">
						<button class="u-reset-button obtn2" @tap="showPopup('paid')">去打款</button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showNotice" mode="center" border-radius="20">
			<view class="notice-modal">
				<view class="img-wrap">
					<image class="notice-img" :src="authNotice.img" mode=""></image>
				</view>
				<view class="notice-title">{{ authNotice.title }}</view>
				<view class="notice-detail">{{ authNotice.detail || '' }}</view>
				<button class="u-reset-button back-btn" @tap="$Router.back()">返回</button>
			</view>
		</u-popup>

		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>

		<!-- 确认信息 -->
		<u-popup v-model="confirmModel" mode="center" safe-area-inset-bottom :closeable="true" border-radius="30">
			<!-- 标题 -->
			<view class="form-box u-p-20">
				<view class="head-title u-flex u-col-center u-row-center">{{modelInfo.title}}</view>
				<view class="head-content u-flex u-col-center u-row-center">
					{{modelInfo.content}}
				</view>
				<view class=" u-flex u-col-center u-row-center">
					<textarea v-if="currentBtnType == 'denied'" cols="30" rows="5" v-model="remark" style="border: 1px solid #a36fff;padding:20rpx;margin-top: 20rpx;height: 120rpx;" placeholder="请填写拒绝原因"></textarea>
				</view>
				<view class="u-flex u-col-center u-row-between">
					<button class="u-reset-button form-cancel-btn u-m-y-40" @tap="confirmModel = false">取消</button>
					<button class="u-reset-button form-save-btn u-m-y-40" @tap="handleSubmit">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				confirmModel: false,
				time: 0,
				authNotice: {
					img: this.$IMG_URL + '/imgs/commission/auth_check.png',
					title: '您的申请正在审核中',
					detail: "",
					btnPath: ''
				},
				showNotice: false,
				withdrawDetail: {},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				remark: "",
				evidence_image: [],
				currentBtnType: "",
				modelInfo: {
					title: "",
					content: ""
				}
			}
		},
		onShow() {
			this.fetchDianpuWithdrawInfo()
		},
		methods: {
			showPopup(type) {
				if (type == 'denied') {
					this.modelInfo.title = "拒绝申请提示"
				}

				if (type == 'agree') {
					this.modelInfo.title = "同意申请提示"
					this.modelInfo.content = "是否同意提现申请？"
				}
				if (type == 'paid') {
					if(this.evidence_image.length == 0){
						this.$u.toast("请上传打款凭证")
						return
					}
					this.modelInfo.title = "提现打款提示"
					this.modelInfo.content = "是否已给申请人打款？"
				}

				this.confirmModel = true;
				this.currentBtnType = type;
			},
			fetchDianpuWithdrawInfo() {
				let id = this.$route.query.id
				this.$http('money.dianpu_withdraw_info', {
					mode: 'dianpu',
					id
				}).then(res => {
					if (res.ret == 1) {
						this.withdrawDetail = res.data;
					}
				})
			},
			// 上传图片成功
			uploadSuccess(e, type) {
				this.evidence_image.push( e[0].response.data.url)
				console.log(this.evidence_image)
			},
			// 移除图片
			uploadRemove(index, type) {
				this.evidence_image.splice(index,1);
			},
			handleSubmit() {
				let type = this.currentBtnType;
				switch (type) {
					case 'denied':
						this.denied();
						break;
					case 'agree':
						this.agree()
						break;
					case 'paid':
						this.paid()
						break;
				}
			},
			denied() {
				if (!this.remark) {
					this.$u.toast("请输入拒绝理由");
					return
				}
				let params = {
					id: this.withdrawDetail.id,
					remark: this.remark
				};
				this.$http('dianpu_withdraw.dianpu_withdraw_denied', params).then(res => {
					if (res.ret == 1) {
						this.$Router.push('/pages/app/merchant/dianpu_withdraw_list');
						return
					}
					this.$u.toast(res.msg);
				})
			},
			agree() {

				let params = {
					id: this.withdrawDetail.id,
				};
				this.$http('dianpu_withdraw.dianpu_withdraw_agree', params).then(res => {
					if (res.ret == 1) {
						this.$Router.push('/pages/app/merchant/dianpu_withdraw_list');
						return
					}
					this.$u.toast(res.msg);
				})
			},
			paid() {
				let params = {
					id: this.withdrawDetail.id,
					evidence_image:this.evidence_image
				};
				this.$http('dianpu_withdraw.dianpu_withdraw_paid', params).then(res => {
					if (res.ret == 1) {
						this.$Router.push('/pages/app/merchant/dianpu_withdraw_list');
						return
					}
					this.$u.toast(res.msg);
				})
			}
		},
	}
</script>

<style lang="scss">
	// 绑定
	.form-box {
		.head-title {
			height: 100rpx;
			font-size: 34rpx;
			font-weight: 600;
		}

		.form-save-btn {
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #a36fff, #5336ff);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 40rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.form-cancel-btn {
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #999;
			border-radius: 40rpx;
			font-weight: 500;
			color: #999;
		}
	}

	.btn-list {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.remark {
		border: 1px solid #eee;
		width: 100%;
		padding: 20rpx;
	}

	// 订单价格信息
	.order-price-box {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.notice-item {
			height: 80rpx;


		}

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.detail {
			font-size: 28rpx;
			color: #333;
		}

		.all-rpice-item {
			justify-content: flex-end;

			.all-price {
				font-size: 26rpx;
				color: #ff0000;
			}
		}
	}

	.foot-wrap {
		width: 750rpx;
		height: 140rpx;
	}

	.foot_box {
		width: 750rpx;
		min-height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(238, 238, 238, 1);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.money-box {
			height: 60rpx;
			padding: 0 20rpx;

			.money-title {
				font-size: 26rpx;
				color: #999999;
			}

			.all-price {
				color: #333;
				font-size: 26rpx;
			}
		}

		.btn-box {
			width: 100%;
			margin-bottom: 10rpx;

			.obtn1 {
				width: 40%;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 40%;
				line-height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}
	}

	// 提示
	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612rpx;
		min-height: 658rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;

		.img-wrap {
			margin-bottom: 50rpx;

			.notice-img {
				width: 180rpx;
				height: 170rpx;
			}
		}

		.notice-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #46351b;
			margin-bottom: 28rpx;
		}

		.notice-detail {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}

		.notice-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 10rpx;
		}

		.back-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3ab29c;
			background: none;
		}
	}
</style>
